<template>


    <!-- 标题 -->
    <div class="filter-lable"><el-text size="small">{{ item.title }}</el-text></div>
    <!-- string -->
    <el-input v-if="UIType === 'string'" v-model="itemValue" placeholder="请输入" />
    <!-- datetime -->
    <el-date-picker v-else-if="UIType === 'datetime'" value-format="YYYY-MM" v-model="itemValue" type="month" style="width: 100%;"
        placeholder="请输入" />
    <!-- enum -->
    <el-select v-else-if="UIType === 'enum'" v-model="itemValue" placeholder="请输入">
        <el-option v-for="(item, index) in enmuOptions" :key="index" :label="item.label" :value="item.value" />
    </el-select>
    <!-- ref -->
    <el-input v-else-if="UIType === 'ref'" v-model="itemValue" placeholder="请输入">
        <template #suffix>
            <i class="iconfont icon-sousuo" style="cursor: pointer;" @click="refDrawer = true"></i>
        </template>
    </el-input>

    <el-drawer v-model="refDrawer" size="70%">
        <!-- <template #header>
            {{ item.title }}
        </template> -->
        <template #default v-if="refDrawer">
            <OrgRef v-if="item.idJoinObject === 'dep' || item.idJoinObject === 'employee'" :refParams="refParams" :handleRefClick="handleRefClick"></OrgRef>
            <Ref v-else :refParams="refParams" :handleRefClick="handleRefClick"></Ref>
            <!-- <Ref :refParams="refParams" :handleRefClick="handleRefClick"></Ref> -->
        </template>
        <!-- <template #footer>
            <div style="text-align: center;">
                <el-button @click="refDrawer = false">取消</el-button>
                <el-button type="primary" @click="handleConfirm">确认</el-button>
            </div>
        </template> -->
    </el-drawer>



</template>

<script setup>

import { onMounted, watch, ref } from "vue"
import { apiConfigurable } from "@/request/api";

import Ref from "@/components/Ref/Ref.vue";
import OrgRef from "@/components/Ref/OrgRef.vue";


const props = defineProps({
    item: {
        type: Object,
        defalut: {}
    },
    handleChange: {
        type: Function,
        defalut: ()=>{}
    },
})

// 公共
const itemValue = ref("")
const UIType = props.item.UIType


const refParams = ref({
    object: props.item.idJoinObject,
    toobject: props.item.idObject,
    field: props.item.sField,
    sRefKey: props.item.sRefKey,
    classname: props.item.classname,
    params: "",
    inview: ""
});

watch(itemValue, (newval) => {
    props.handleChange(props.item,newval)
    
}, { deep: true, immediate: true })




// enmu
const enmuOptions = ref([])


// ref
const refDrawer = ref(false)
const refPage = ref(1)
const refList = ref([])

function showRefDrawer() {
    refDrawer.value = true
}

function handleRefClick(obj) {
    itemValue.value = obj.title
    refDrawer.value = false
}




switch (UIType) {
    case "enum":
        enmuOptions.value = props.item.value2.split(";").filter(item => item).map(item => {
            return { label: item, value: item }
        })
        break;
}







onMounted(() => {
    init()

})

function init() {
    // UIType.value = props.item.UIType
}
function handleConfirm() {

}







</script>

<style scoped></style>